import Vue from 'vue'
import App from './App.vue'

import Cookies from 'js-cookie'

import 'normalize.css/normalize.css' // a modern alternative to CSS resets

import Element from 'element-ui'
import './assets/styles/element-variables.scss'

import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import store from './store'
import router from './router'
import './permission' // permission control
import _ from 'lodash'

Vue.config.productionTip = false
Vue.use(Element, {
  size: Cookies.get('size') || 'medium' // set element-ui default size
})
Vue.directive('lazyload',{
  inserted(el,bind,vnode){
    console.log(bind,el);
    const ob = new IntersectionObserver(({isIntersecting})=>{
      if(isIntersecting){
         el.src = bind.value
      }
   })
   ob.observe(el)
  }
})
Vue.directive('focus',{
  inserted(el,bind,vnode){
    el.focus()
  }
})
Vue.directive('permission',{
  inserted(el, binding, vnode) {
    const { value } = binding

    const all_permission = "*:*:*";
    const permissions = store.getters && store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
})
new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')
